<template>
    <div class="box">
        <el-container>
            <div class="mostTop"></div>
            <el-header class="clearfix">
                <p class="addBookTitle">新增图书</p>
                <p class="return" @click="back()">< 返回</p>
            </el-header>
            <el-main>
                <p class="bookDetails">基本信息</p>
                <div class="inputTitle clearfix">
                    <div class="left">
                        <p>图书名称</p>
                        <el-input v-model="name" placeholder="图书名称"></el-input>
                        <p>所属课程</p>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                        <p>图书价格</p>
                        <el-input v-model="price" placeholder="图书价格" @blur="phoneyz"></el-input>
                    </div>
                    <div class="right">
                        <p>图书作者</p>
                        <el-input v-model="author" placeholder="图书作者"></el-input>
                        <p>出版社</p>
                        <el-input v-model="press" placeholder="出版社"></el-input>
                    </div>
                </div>
            </el-main>
        </el-container>
        <div id="footBox">
            <div id="footer">
                <el-button type="info" @click="cancel()" :plain="true">取消</el-button>
                <el-button type="success" @click="ok()" :plain="true">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: "",
                options: [],//课程下拉菜单
                name: "", //图书名称
                textarea: "", //图书介绍
                price: "", //图书价格
                number: "", //图书编号
                author: "", //图书作者
                press: "", //出版社
            };
        },
        methods: {
            //价格验证
            phoneyz() {
                var reg = /^[0-9]$/;
                if (!reg.test(this.price)) {
                    this.$message.error('格式不正确，请重新输入！');
                }
            },
            //保存
            ok() {
                if (this.name == '' || this.value == "") {
                    this.$message({
                        showClose: true,
                        message: '请填写完整信息！',
                        type: 'warning'
                    });
                } else {
                    this.$axios({
                        url: "/book/add",
                        method: "post",
                        data: {
                            author: this.author,
                            bookName: this.name,
                            bookPublish: this.press,
                            price: this.price,
                            courseId: this.value
                        },
                    })
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.$router.push('/BooksList');
                            } else {
                                this.$message.error(`${res.data.msg}`);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }

            },
            //取消
            cancel() {
                this.$confirm('检测到有未保存的内容，确认是否离开？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '保存',
                    cancelButtonText: '离开'
                })
                    .then(() => {
                        this.baocun();
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '放弃保存并离开页面'
                                : '停留在当前页面'
                        });
                    });
            },
            //返回
            back() {
                this.$router.go(-1);
            },
        },
        mounted() {
            //渲染所有课程
            this.$axios({
                url: '/course/allName',
                method: 'get'
            }).then((res) => {
                console.log(res.data.data)
                var data = res.data.data
                for (var i = 0; i < data.length; i++) {
                    this.options.push({value: data[i].id, label: data[i].courseName})
                }
            })

        }
    };
</script>
<style lang="less" scoped>
    .clearfix:after {
        content: "";
        clear: both;
        display: block;
    }

    .box {
        background: #f2f2f6;
    }

    .el-header {
        background-color: #fff;
        margin-top: 10px;
        line-height: 30px;

        .addBookTitle {
            color: #333;
            float: left;
            font-size: 18px;
        }

        .return {
            color: #333;
            float: right;
            font-size: 18px;
            cursor: pointer;
        }
        .return:hover {
            color: #8cc5ff;
        }
    }

    .el-main {
        margin-top: 10px;
        background-color: #fff;
        color: #333;

        .bookDetails {
            font-weight: bold;
        }

        .inputTitle {
            width: 100%;

            .left {
                float: left;
                width: 47%;
                .el-select{
                    width: 100%;
                }
            }

            .right {
                margin-left: 6%;
                float: left;
                width: 47%;

                .date {
                    width: 100%;
                }
            }
        }
    }

    #footBox {
        width: 100%;
        height: 350px;
        background: white;
    }

    #footer {
        margin-left: 43%;
        height: 200px;

        .el-button {
            float: left;
            margin-top: 100px;
        }
    }

    body > .el-container {
        margin-bottom: 40px;
    }
</style>